<template>
  <div class="">
    <!-- 电脑端banner -->
    <div class="pCBanner">
      <img src="../assets/images/banner2@2x.jpg" class="aimgs">

      <div class="tuandetial">
        <div class="container">
          <div class="tuandetialCom">
            <div class="tuandetialLeft">
              <p  style="overflow: inherit;white-space: inherit;" class="ydym">
                <span v-if="state==1">预展 |</span>
                <span v-if="state==2" style="color: red;">进行中 |</span>
                <span v-if="state==3" style="color: #000;">已结束</span>
                <span> {{activeinfo.group_name}}</span>
                <span v-if="activeinfo.state==0&&type==1">将于{{activeinfo.starttime}} 开始 敬请关注</span>
              </p>
              <p class="adprices" v-if="activeinfo.deposit"><img src="../assets/images/yj@2x.png" style="margin: initial;">￥{{activeinfo.deposit}}</p>
            </div>
            <div class="tuandetialRight">
              <img :src="activeinfo.logo" alt="" style="border-radius: 50%;height: 100px;width: 100px;">
              <p> {{activeinfo.view}} 人关注</p>
            </div>
          </div>
          <div class="tuandetialTop" v-if="state==1">
            {{activeinfo.starttime}} 开始
          </div>
          <div class="tuandetialTop" v-if="state==2">
            {{activeinfo.endtime}} 结束
          </div>
          <div class="tuandetialTop" v-if="state==3">
            已结束
          </div>
        </div>
      </div>
    </div>
    <!-- 电脑端banner结束 -->

    <!-- 拍卖详情内容开始 -->
    <div class="TunaCom">
      <div class="container">
        <div class="TunaComTop">
          加价规则
        </div>
        <div class="TunaComConser tunjcsp" style="display: flex;" v-for="(item,index) in activeinfo.price_role_arr">
          <p><span style="font-size: 50px;vertical-align: text-bottom;">·</span>{{item.one}}</p>
          <p><span style="font-size: 50px;vertical-align: text-bottom;">·</span>{{item.two}}</p>
        </div>
        <p style="font-size: 18px;margin-top: 15px;" class="tunjcspp" >{{activeinfo.leitui}}</p>
        <template v-if="type==2">
          <div class="TunaComTop" style="width: 135px;">
            延迟出价规则
          </div>
          <div class="TunaComConser">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;{{activeinfo.yanshi_role}}</p>
          </div>
          <div class="TunaComTop">
            保证金规则
          </div>
          <div class="TunaComConser">
            <p>1、未竞拍成功的活动结束后即时原路退回。</p>
            <p>2、竞价成功并在48小时内支付货款的，付款后即时原路退回。</p>
            <p>3、超过48小时未付款的商家有权关闭订单，并扣除全额保证金。</p>
          </div>
          <div class="TunaComTop">
            活动详情
          </div>
          <div class="TunaComConser">
            &nbsp;&nbsp;&nbsp;&nbsp;{{activeinfo.desc}}
          </div>
          <div class="TunaComConser">
            <img v-for="(item,index) in pics" :src="item" alt="" style="width: 100%;">
            <img v-for="(item,index) in activeinfo.ytpics" :src="item" alt="" style="width: 100%;">
          </div> 
        </template>
        
        <template v-if="type==1">
          <div class="TunaComTop" style="width: 135px;">
            拍卖规则
          </div>
          <div class="TunaComConser">
            <div v-if="activeinfo.live_mode == 2">
              <div v-if="activeinfo.new_feepercent < activeinfo.old_feepercent">
                <p>1、本场拍卖收取买家佣金,每件最少{{activeinfo.lowfee}}元，费率{{activeinfo.feepercent}}%&nbsp; <text style="color: #ff0000;">{{activeinfo.new_feepercent}}%</text></p>
              </div>
              <div v-else>
                <p>1、本场拍卖收取买家佣金,每件最少{{activeinfo.lowfee}}元，费率{{activeinfo.feepercent}}%</p>
              </div>
              <p>2、预结束前三分钟开启延迟出价，预结束时间后加价翻倍。</p>
              <p>3、本场拍卖方式为整体开始整体结束。</p>
              <p>{{activeinfo.active_role}}</p>
            </div>
            <div v-else>
              <div v-if="activeinfo.new_feepercent < activeinfo.old_feepercent">
                <p>本场拍卖收取买家佣金,每件最少{{activeinfo.lowfee}}元，费率&nbsp; {{activeinfo.new_feepercent}}%</p>
              </div>
              <div v-else>
                <p>本场拍卖收取买家佣金,每件最少{{activeinfo.lowfee}}元，费率&nbsp; <span style="color: #ff0000;">{{activeinfo.feepercent}}%</span></p>
              </div>
              <p>{{activeinfo.active_role}}</p>
            </div>
          </div>
          <div class="TunaComTop" style="width: 135px;">
            保证金规则
          </div>
          <div class="TunaComConser">
            <p>1、未竞拍成功的活动结束后即时原路退回。</p>
            <p>2、竞价成功并在48小时内支付货款的，付款后即时原路退回。</p>
            <p>3、超过48小时未付款的商家有权关闭订单，并扣除全额保证金。</p>
          </div>
          <div class="TunaComTop" style="width: 135px;">
            活动详情
          </div>
          <div class="TunaComConser">
            <pre v-html="activeinfo.desc"></pre>
          </div>
          <div class="TunaComConkon">
            <div class="TunaComTop">
              拍品目录
            </div>
            <div class="TunaComConkonI">
              <div class="TunaComConkonItem" v-for="(item,index) in activeinfo.goods" :key="index">
                <span>{{index+1}}.【{{item.score}}{{item.score_type}}】{{item.name}}</span>
                <p>
                  <!-- <img src="../assets/images/xz19@2x.png"> -->
                  <span style="color: red;" v-for="(itemm,indexx) in item.ratings" :key="index" class="text-red hou-xing">★</span>
                  <span style="color: red;" v-for="(itemm,indexx) in (5 - item.ratings)" :key="index" class="text-red hou-xing">☆</span>
                </p>
              </div>
            </div>
          </div>
        </template>

      </div>
    </div>

    <div class="TunaMonkey" v-if="type==1">
      <div class="container">
        <div class="TunaMonkeyItem" :style="$route.query.goodsid&&$route.query.goodsid=='#'+item.id?'box-shadow: 0 0 18px 0px #d1b390c4;border-radius: 5px;':''" v-for="(item,index) in activeinfo.goods" :key="index" :id="'#'+item.id" @click="getshopAuctions(item.id)">
          <div class="TunaMonkeyItemTop">
            <p><span style="display: inline-block;margin-right: 10px;">{{item.str_sort}}</span>{{item.name}}</p>
            <p>查看结果</p>
          </div>
          <div class="TunaMonkeyItemCom thTunaMonkeyItemCom" style="overflow: hidden;">
            <div v-for="(itemm,indexx) in item.pics" :key="indexx" :style="`background-image: url(${itemm});background-repeat: no-repeat;background-position: center;width: 32%;`"></div>
          </div>
          <div class="Tuanpai">
            <div class="Tuanpaic">

              <!-- <div class="Kaipai">
                <img src="../assets/images/xz20@2x.png">
                开拍通知
              </div> -->
              <div class="Tuijianzhi">
                推荐指数：
                <b v-if="item.ratings">
                  <img v-for="(itemm,indexx) in item.ratings" src="../assets/images/xz19@2x.png">
                </b>
                <span v-else>暂无推荐指数</span>

              </div>
              <div class="Qibujia">
                	{{item.mode == 1?'秒杀价:':'起步价:'}}{{item.startprice}}元
              </div>
            </div>
            <div class="Fibujias">
              	{{item.endprice > 0 ?'封顶价:'+item.endprice+'元' : '暂无封顶价'}}
            </div>
          </div>
          <div class="Fibujias" style="margin-left: 0;margin: 20px 0;">
            {{item.desc}}
          </div>
        </div>
      </div>

    </div>
    
    <div class="boxqrcodeurl" @touchstart="touchStart(activeinfo.qrcodeurl)" @touchend="touchEnd()">
      <img :src="activeinfo.qrcodeurl" alt="">
      <div>
        <p>微</p>
        <p>信</p>
        <p>扫</p>
        <p>码</p>
        <p>进</p>
        <p>入</p>
        <!--<p v-if="type==1">拍</p>
        <p v-if="type==1">卖</p>
        <p v-if="type==2">团</p>
        <p v-if="type==2">购</p> -->
      </div>
    </div>
    
    <!-- 拍卖详情内容结束 -->
  </div>
</template>

<script>
  import { groupInfo, activeInfo, get_tuan_share_pic } from '@/api/utils.js'
  export default {
    name: '',
    components: {},
    props: [],
    data() {
      return {
        id: '',
        type: '',
        page: 1,
        state: '',
        pics: [],
        activeinfo: {},
        timer:'',
      }
    },
    computed: {},
    watch: {},
    beforeRouteLeave(to, from, next) {
      sessionStorage.setItem('type',this.type)
      sessionStorage.setItem('page',this.page)
      next();
    },
    created() {
      this.id = this.$route.query.id
      this.type = this.$route.query.type
      this.page = this.$route.query.page
      if (this.$route.query.type==2) {
        this.gettuansharepic()
      }
      this.getgroupInfo()
    },
    mounted() {},
    methods: {
      gettuansharepic() {
        var that = this
        var params = {
          activeid: this.id,
          user: ''
        }
        get_tuan_share_pic(params).then(res => {
          if (res.Code == 1) {
            console.log(res)
            this.pics = res.data.pics
          }
        })
      },
      getgroupInfo() {
        var that = this
        if (this.type == 1) {
          var params = {
            activeid: this.id
          }
          activeInfo(params).then(res => {
            if (res.Code == 1) {
              this.activeinfo = res.activeinfo
              this.state = parseInt(res.activeinfo.state) + 1
              console.log(this.$route.query.goodsid)
              if (this.$route.query.goodsid) {
                this.$nextTick(() => {
                  document.getElementById(that.$route.query.goodsid).scrollIntoView({behavior: "smooth",block:"center"})
                })
              }
            }
          })
        } else {
          var params = {
            groupid: this.id
          }
          groupInfo(params).then(res => {
            if (res.Code == 1) {
              this.activeinfo = res.activeinfo
              this.state = parseInt(res.activeinfo.state) + 1
            }
          })
        }
      },
      getshopAuctions(e) {
        this.$router.push({path: '/shopAuctions',query: {goodsid:e,activeid:this.id}})
      },
      touchEnd() {
        //手指离开
        clearTimeout(this.timer);
      },
      touchStart(e) {
        //手指触摸
        clearTimeout(this.timer); //再次清空定时器，防止重复注册定时器
        this.timer = setTimeout(() => {
          this.downloadIamge(e, "微藏汇");
        }, 1000);
      },
      downloadIamge(imgsrc, name) {
        //下载图片地址和图片名
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = () => {
          let canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          let context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
          let a = document.createElement("a"); // 生成一个a元素
          let event = new MouseEvent("click"); // 创建一个单击事件
          a.download = name || "photo"; // 设置图片名称
          a.href = url; // 将生成的URL设置为a.href属性
          a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgsrc;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import url("../assets/css/basic.css");
  @import url("../assets/css/media.css");
  .Fibujias{
    word-wrap: break-word;
  }
  .container{
    padding-top: 50px;
  }
  .TunaMonkeyItem{
    cursor: pointer;
  }
  @media only screen and (min-width: 100px) and (max-width: 998px) {
    .tuandetialCom{
      align-items: flex-start;
    }
    .tuandetialLeft{
      width: calc(100% - 60px)!important;
    }
    .ydym {
      width: 100%!important;
    }
    .tuandetialRight p{
      font-size: 10px;
    }
  }
</style>